<template>
  <div style="width: 100vw;height: 100vh;position: relative;">

    <div style="width: 100%;height: 180px;border-bottom: 1px solid black;">

      <span style="zoom: 1.5;">

        <div style="width: 100%;display: flex;align-items: center;gap: 4px;">
          dsplay:
          <button @click="display = 'block'" :style="{
            backgroundColor: display === 'block' ? 'blue' : 'white',
            color: display === 'block' ? 'white' : 'black',
          }">block</button>
          <button @click="display = 'flex'" :style="{
            backgroundColor: display === 'flex' ? 'blue' : 'white',
            color: display === 'flex' ? 'white' : 'black',
          }">flex</button>
        </div>

        <div style="width: 100%;display: flex;align-items: center;gap: 4px;">
          flex-direction:
          <button @click="flexDirection = 'row'" :style="{
            backgroundColor: flexDirection === 'row' ? 'blue' : 'white',
            color: flexDirection === 'row' ? 'white' : 'black',
          }">row</button>
          <button @click="flexDirection = 'column'" :style="{
            backgroundColor: flexDirection === 'column' ? 'blue' : 'white',
            color: flexDirection === 'column' ? 'white' : 'black',
          }">column</button>
          <button @click="flexDirection = 'row-reverse'" :style="{
            backgroundColor: flexDirection === 'row-reverse' ? 'blue' : 'white',
            color: flexDirection === 'row-reverse' ? 'white' : 'black',
          }">row-reverse</button>
          <button @click="flexDirection = 'column-reverse'" :style="{
            backgroundColor: flexDirection === 'column-reverse' ? 'blue' : 'white',
            color: flexDirection === 'column-reverse' ? 'white' : 'black',
          }">column-reverse</button>
        </div>

        <div style="width: 100%;display: flex;align-items: center;gap: 4px;">
          justify-content:
          <button @click="justifyContent = 'flex-start'" :style="{
            backgroundColor: justifyContent === 'flex-start' ? 'blue' : 'white',
            color: justifyContent === 'flex-start' ? 'white' : 'black',
          }">flex-start</button>
          <button @click="justifyContent = 'center'" :style="{
            backgroundColor: justifyContent === 'center' ? 'blue' : 'white',
            color: justifyContent === 'center' ? 'white' : 'black',
          }">center</button>
          <button @click="justifyContent = 'flex-end'" :style="{
            backgroundColor: justifyContent === 'flex-end' ? 'blue' : 'white',
            color: justifyContent === 'flex-end' ? 'white' : 'black',
          }">flex-end</button>
        </div>

        <div style="width: 100%;display: flex;align-items: center;gap: 4px;">
          align-items:
          <button @click="alignItems = 'flex-start'" :style="{
            backgroundColor: alignItems === 'flex-start' ? 'blue' : 'white',
            color: alignItems === 'flex-start' ? 'white' : 'black',
          }">flex-start</button>
          <button @click="alignItems = 'center'" :style="{
            backgroundColor: alignItems === 'center' ? 'blue' : 'white',
            color: alignItems === 'center' ? 'white' : 'black',
          }">center</button>
          <button @click="alignItems = 'flex-end'" :style="{
            backgroundColor: alignItems === 'flex-end' ? 'blue' : 'white',
            color: alignItems === 'flex-end' ? 'white' : 'black',
          }">flex-end</button>
        </div>

        <div style="width: 100%;display: flex;align-items: center;gap: 4px;">
          gap:
          <input type="range" class="slider" id="slider" min="0" max="100" v-model="gap">
          {{ gap }}px
        </div>

      </span>

    </div>

    <div style="width: 100%;height: calc(100vh - 180px);" :style="{
      display: display,
      flexDirection: flexDirection,
      justifyContent: justifyContent,
      alignItems: alignItems,
      gap: gap + 'px',
    }">
      <div style="display: inline-block;width: 100px;height: 100px;background-color: red;;font-size: inherit;">
        1
      </div>
      <div style="display: inline-block;width: 100px;height: 100px;background-color: orange;;font-size: inherit;">
        2
      </div>
      <div style="display: inline-block;width: 100px;height: 100px;background-color: yellow;;font-size: inherit;">
        3
      </div>
      <div style="display: inline-block;width: 100px;height: 100px;background-color: green;;font-size: inherit;">
        4
      </div>
      <div style="display: inline-block;width: 100px;height: 100px;background-color:aqua;;font-size: inherit;">
        5
      </div>
      <div style="display: inline-block;width: 100px;height: 100px;background-color: blue;font-size: inherit;">
        6
      </div>
      <div style="display: inline-block;width: 100px;height: 100px;background-color: purple;;font-size: inherit;">
        7
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, reactive, defineProps, computed, watch, onMounted, onBeforeUnmount } from 'vue'

const display = ref('block')
const flexDirection = ref('row')
const justifyContent = ref('flex-start')
const alignItems = ref('flex-start')
const gap = ref(0)

onMounted(async () => {

})

</script>

<style scoped></style>